﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>子系统用户管理</title>
	<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}">
	<link rel="stylesheet" th:href="@{/bootstrap/css/toastr.min.css}">
	<link rel="stylesheet" th:href="@{/bootstrap/css/window.css}">
<script type="text/javascript" th:src="@{/bootstrap/js/jquery-3.3.1.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/toastr.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/window.js}"></script>
</head>
<body>

<div class="container" style="margin-top: 5%">
	<table class="table table-hover">
		<ul class="nav nav-pills" style="float: right;margin-right: 5%">
			<li role="presentation">
				<button class="btn  btn-success" data-toggle="modal" data-target="#myModal"> 添加 </button> 
		    </li>
		</ul>
		<thead>
		<tr>
			<th>系统名称</th>
			<th>链接地址</th>
			<th>用户名</th>
			<th>密码</th>
			<th>操作</th>
		</tr>
		</thead>
		<tbody id="userData">
			
		</tbody>
	</table>
</div>

 
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            
            <div class="modal-header">
                <button class="close" data-dismiss="modal">X</button>
                <div class="modal-title">新增用戶</div>
            </div>
 
            <div class="modal-body">
                <form class="form-horizontal">
			        <div class="container">
			            <div class="row form-group">
			                <label class="control-label col-lg-1" for="name">系统名称</label>
			                <div class="col-lg-5 col-md-6">
			                    <input class="form-control" id="clientName" type="text">
			                </div>
			            </div>
			            <div class="row form-group">
			                <label class="control-label col-lg-1">链接地址</label>
			                <div class="col-lg-5 col-md-6">
			                    <input class="form-control" id="clientUrl" type="text">
			                </div>
			            </div>
			            <div class="row form-group">
			                <label class="control-label col-lg-1">用户名</label>
			                <div class="col-lg-5 col-md-6">
			                    <input class="form-control" id="userName" type="text">
			                </div>
			            </div>
			            <div class="row form-group">
			                <label class="control-label col-lg-1" for="name">密码</label>
			                <div class="col-lg-5 col-md-6">
			                    <input class="form-control" id="userPassword" type="text">
			                </div>
			            </div>
			        </div>
			    </form>
            </div>
 
            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal" onclick="addUser()">提交</button>
                <button class="btn btn-primary" data-dismiss="modal" onclick="cancelAdd()">取消</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modifyModal">
    <div class="modal-dialog">
        <div class="modal-content">
            
            <div class="modal-header">
                <button class="close" data-dismiss="modal">X</button>
                <div class="modal-title">修改用戶</div>
            </div>
 
            <div class="modal-body">
                <form class="form-horizontal">
			        <div class="container">
			        	<div class="col-lg-5 col-md-6" style="display:none;">
		                    <input class="form-control" id="id2" type="text">
		                </div>
			            <div class="row form-group">
			                <label class="control-label col-lg-1" for="name">系统名称</label>
			                <div class="col-lg-5 col-md-6">
			                    <input class="form-control" id="clientName2" type="text">
			                </div>
			            </div>
			            <div class="row form-group">
			                <label class="control-label col-lg-1">链接地址</label>
			                <div class="col-lg-5 col-md-6">
			                    <input class="form-control" id="clientUrl2" type="text">
			                </div>
			            </div>
			            <div class="row form-group">
			                <label class="control-label col-lg-1">用户名</label>
			                <div class="col-lg-5 col-md-6">
			                    <input class="form-control" id="userName2" type="text">
			                </div>
			            </div>
			            <div class="row form-group">
			                <label class="control-label col-lg-1" for="name">密码</label>
			                <div class="col-lg-5 col-md-6">
			                    <input class="form-control" id="userPassword2" type="text">
			                </div>
			            </div>
			        </div>
			    </form>
            </div>
 
            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal" onclick="modifyUser()">提交</button>
                <button class="btn btn-primary" data-dismiss="modal" onclick="cancelModify()">取消</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
<script>
function getUserData(){
	$.ajax({
		type: "POST",
		async: true,  //默认true,异步
		//data: paramString,
		//dataType: 'text',
		url: "[[@{/subuser/getAll}]]",
		success:function(data){
			if(data && data.code){
				if(data.code == "OK"){
					userListArray = data.data;
			    	//<div v-for="(item, index) of clientList" :key="index" class="flex_item" @click="checkClient(item)" >{{item.clientName}}</div>
			    	for(var i=0; i<userListArray.length; i++){
			    		var item = userListArray[i];
			    		$("#userData").append('<tr><td>'+item.clientName+'</td><td>'+item.clientUrl+'</td><td>'+item.userName+'</td><td>'+item.userPassword+'</td><td><button type="button" class="btn  btn-danger" onclick="deleteUser('+item.id+')"> 删除 </button> <button type="button" class="btn  btn-warning" onclick="toModify('+item.id+')"> 修改 </button></td></tr>');
			    	}
				}
			}
	    }
	});
};
function deleteUser(id){
	win.confirm('警告', '确定删除吗？', function (r) {
        if(r){
        	$.ajax({
        		type: "POST",
        		async: true,
        		url: '[[@{/subuser/delete}]]',
        		data: {"id":id},
        		dataType: 'json',
        		success:function(data){
        			if(data && data.code){
        				if(data.code == "OK"){
        					window.location= "[[@{/subuser/index}]]";
        				}
        			}
        	    }
        	});
        }
    });
	
}
function addUser(){
	var clientName = $("#clientName").val();
	var clientUrl = $("#clientUrl").val();
	var userName = $("#userName").val();
	var userPassword = $("#userPassword").val();
	if(check(clientName,clientUrl,userName,userPassword)){
		$.ajax({
			type: "POST",
			async: true,  //默认true,异步
			data: {"clientName":clientName,"clientUrl":clientUrl,"userName":userName,"userPassword":userPassword},
			dataType: 'json',
			url: "[[@{/subuser/addUser}]]",
			success:function(data){
				if(data && data.code){
					if(data.code == "OK"){
						window.location= "[[@{/subuser/index}]]";
					}
				}
		    }
		});
	}
}
function cancelAdd(){
	$("#clientName").val("");
	$("#clientUrl").val("");
	$("#userName").val("");
	$("#userPassword").val("");
	$('#myModal').modal('hide');
}
function cancelModify(){
	$("#id2").val("");
	$("#clientName2").val("");
	$("#clientUrl2").val("");
	$("#userName2").val("");
	$("#userPassword2")("");
	$('#modifyModal').modal('hide');
}
function toModify(id){
	$.ajax({
		type: "POST",
		async: true,
		url: '[[@{/subuser/toModify}]]',
		data: {"id":id},
		dataType: 'json',
		success:function(data){
			if(data && data.code){
				if(data.code == "OK"){
					userListArray = data.data;
					item = userListArray[0];
					$("#clientName2").val(item.clientName);
					$("#clientUrl2").val(item.clientUrl);
					$("#userName2").val(item.userName);
					$("#userPassword2").val(item.userPassword);
					$("#id2").val(item.id);
					$('#modifyModal').modal('show');
				}
			}
	    }
	});
}
function modifyUser(){
	var id = $("#id2").val();
	var clientName = $("#clientName2").val();
	var clientUrl = $("#clientUrl2").val();
	var userName = $("#userName2").val();
	var userPassword = $("#userPassword2").val();
	if(check(clientName,clientUrl,userName,userPassword)){
		$.ajax({
			type: "POST",
			async: true,  //默认true,异步
			data: {"id":id,"clientName":clientName,"clientUrl":clientUrl,"userName":userName,"userPassword":userPassword},
			dataType: 'json',
			url: "[[@{/subuser/modifyUser}]]",
			success:function(data){
				if(data && data.code){
					if(data.code == "OK"){
						window.location= "[[@{/subuser/index}]]";
					}
				}
		    }
		});
	}
}
function check(clientName,clientUrl,userName,userPassword){
	if(!clientName){
		toastr.warning('系统名称不可为空!', 'Warning');
		return false;
	}
	if(!clientUrl){
		toastr.warning('系统链接不可为空!', 'Warning');
		return false;
	}
	if(!userName){
		toastr.warning('用户名不可为空!', 'Warning');
		return false;
	}
	if(!userPassword){
		toastr.warning('密码不可为空!', 'Warning');
		return false;
	}
	return true;
}


function showMsg(msg, callback){  
	$('#myModal').modal('show');
    setTimeout(function(){
        $("#myModal").modal("hide")
    },1200); 
}
window.alert = function(message){
    $.globalMessenger().post({
        message: message,
        hideAfter: 3,
        showCloseButton: true
    });
};
window.onload=getUserData;
</script>
